<template>
<view class="bb">
	

<view class="container">
	<view class="nav">
		<u-subsection bgColor="#eea400" :list="tabs" :current="current" @change="sectionChange" ></u-subsection>
	</view>
	<view class="list">
		<view class="list-item" v-for="(item,index) in orderlist" :key="item.oid">
			<u-row class="top5 block">
				<u-col  span="10">
					<text>订单状态</text>
				</u-col>
				<u-col>
					<text class="ffa400" v-if="item.state === 0">未付款</text>
					<text class="ffa400" v-else-if="item.state === 1">待发货</text>
					<text class="ffa400" v-else-if="item.state === 2">已发货</text>
					<text class="ffa400" v-else-if="item.state === 3">已送达</text>
					<text class="ffa400" v-else>交易完成</text>
				</u-col>
			</u-row>
			<view @click="goCommodity(item2)" class="list-item-item" v-for="(item2,index2) in item.cidlist" :key="index2">
				<u-row>
					<u-col span="5">
						<u--image :src="item2.imgurl" radius="11" width="120" height="100"> </u--image>
					</u-col>
					<u-col>
						<text class="minitext">{{item2.name}}</text>
						<text space="emsp" class="minitext">单价:{{item2.price}}</text>
						<text space="emsp" class="minitext color777"> 购买尺码:{{item2.shoesize}}     数量:{{item2.num}}</text>	
					</u-col>
				</u-row>
				
				<u-divider lineColor="#999"></u-divider>
			</view>
			<u-row class="top5">
				<u-col offset="1">
					<text class="bigtext">实付款:{{item.price}}</text>
				</u-col>
			</u-row>
			<u-row class="top5">
				<u-col offset="5" span="3" class="left20">
					<u-button v-if="item.state === 0" type="info" :plain="true" text="删除订单"></u-button>
					<u-button v-if="item.state === 4" type="info" :plain="true" text="删除订单"></u-button>
				</u-col>
				
				<u-col offset="1" span="3">
					<u-button v-if="item.state === 0" type="primary" :plain="true" text="去付款"></u-button>
					<u-button v-else-if="item.state === 1" type="primary" :plain="true" text="催单"></u-button>
					<u-button v-else-if="item.state === 2" type="primary" :plain="true" text="查看物流"></u-button>
					<u-button v-else-if="item.state === 3" type="success" :plain="true" text="确认收货"></u-button>
					<u-button v-else type="primary" :plain="true" text="申请开票"></u-button>
				</u-col>
			</u-row>
			<view class="h50">
				
			</view>
		</view>
	</view>
</view>
</view>
</template>

<script>
	export default{
		data(){
			return{
				 orderlist:[],
				 tabs: ['全部','未发货', '待收货', '未付款'],
				 current: 0
			}
		},
		
		methods:{
			goCommodity(item){
				uni.navigateTo({
					url:'/pages/commodity/commodity?cid='+item.cid
				})
			},
			sectionChange(index) {
				this.current = index;
				if(index === 0){
					this.getAllList()
				}
				if(index === 1){
					this.getState1()
				}
				if(index === 2){
					this.getState2()
				}
				if(index === 3){
					this.getState0()
				}
			},
			//获取全部
			getAllList(){
				uni.$u.http.get('/orders').then(res=>{
					
					if(res.data.code === 200){
						this.orderlist = res.data.data
						for (let i = 0; i < this.orderlist.length; i++) {
							let obj = this.orderlist[i]
							this.orderlist[i].cidlist = JSON.parse(obj.cidlist)
						}
						
					}
					
					
				})
			},
			//获取未付款
			getState0(){
				uni.$u.http.get('/orders?state=0').then(res=>{
					if(res.data.code === 200){
						this.orderlist = res.data.data
					}
					for (let i = 0; i < this.orderlist.length; i++) {
						let obj = this.orderlist[i]
						this.orderlist[i].cidlist = JSON.parse(obj.cidlist)
					}
				})
			},
			//获取未发货
			getState1(){
				uni.$u.http.get('/orders?state=1').then(res=>{
					if(res.data.code === 200){
						this.orderlist = res.data.data
					}
					for (let i = 0; i < this.orderlist.length; i++) {
						let obj = this.orderlist[i]
						this.orderlist[i].cidlist = JSON.parse(obj.cidlist)
					}
				})
			},
			//获取待收货(已发货)
			getState2(){
				uni.$u.http.get('/orders?state=2').then(res=>{
					if(res.data.code === 200){
						this.orderlist = res.data.data
					}
					for (let i = 0; i < this.orderlist.length; i++) {
						let obj = this.orderlist[i]
						this.orderlist[i].cidlist = JSON.parse(obj.cidlist)
					}
				})
			},
		},
		onLoad(e) {
			this.getAllList()
			this.sectionChange(e.i)
		}
	}
</script>

<style scoped>
	.bb{
		height: 100%;
	}
	.nav{
		margin-top: 2px;
	}
	.list{
		
	}
	.list-item{	
		overflow: hidden;
		margin-top: 17px;
		margin-left: 3%;
		margin-right: 3%;
		min-height: 100px;
		width: 93%;
		background-color: #fff;
		border-radius: 10px;
	}
	.h50{
		height: 24px;
	}
	.list-item-item{
		
		margin-top: 10px;
	}
	.container{
		
		background-color: #eee;
	}
	.minitext{
		display: block;
		font-size: 13px;
	}
	.color777{
		color: #777;
	}
</style>